<template>
	<view class="container">
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 学生信息卡片 -->
			<view class="student-info-card">
				<view class="student-tag">王凯</view>
				<view class="exam-info">
					<text class="exam-title">2024-2025年上学期九年级3月第三次模考</text>
					<text class="exam-date">考试时间：2025/03/03</text>
				</view>
			</view>

			<!-- 成绩统计 -->
			<view class="score-summary">
				<view class="main-score">
					<text class="score-label">考试总得分</text>
					<text class="score-value">120</text>
					<text class="score-unit">分</text>
				</view>
				<view class="sub-scores">
					<view class="sub-score-item">
						<text class="sub-label">总分：</text>
						<text class="sub-value">150</text>
					</view>
					<view class="sub-score-item">
						<text class="sub-label">客观题得分：</text>
						<text class="sub-value">67</text>
					</view>
					<view class="sub-score-item">
						<text class="sub-label">主观题得分：</text>
						<text class="sub-value">53</text>
					</view>
				</view>
			</view>

			<!-- 答题卡标题和状态 -->
			<view class="answer-sheet-header">
				<text class="section-title">答题卡</text>
				<view class="status-legend">
					<view class="legend-item">
						<view class="legend-color correct"></view>
						<text class="legend-text">对</text>
					</view>
					<view class="legend-item">
						<view class="legend-color wrong"></view>
						<text class="legend-text">错</text>
					</view>
					<view class="legend-item">
						<view class="legend-color partial"></view>
						<text class="legend-text">半对</text>
					</view>
					<view class="legend-item">
						<view class="legend-color unanswered"></view>
						<text class="legend-text">未答</text>
					</view>
				</view>
			</view>

			<!-- 提示文字 -->
			<view class="tip-text">
				<text class="tip-content">点击题号对答案，错题已自动加入错题集</text>
			</view>

			<!-- 选择题部分 -->
			<view class="question-section">
				<view class="question-type-header">
					<text class="question-type-title">选择题（共10题）</text>
				</view>
				<view class="question-grid">
					<view class="question-item correct" v-for="n in 5" :key="'choice-' + n" @click="viewQuestion('选择题', n)">
						<text class="question-number">第{{ n }}题</text>
						<text class="question-score">10<text class="score-divider">/</text>10</text>
					</view>
					<view class="question-item wrong" @click="viewQuestion('选择题', 6)">
						<text class="question-number">第6题</text>
						<text class="question-score">0<text class="score-divider">/</text>10</text>
					</view>
					<view class="question-item partial" @click="viewQuestion('选择题', 7)">
						<text class="question-number">第7题</text>
						<text class="question-score">5<text class="score-divider">/</text>10</text>
					</view>
					<view class="question-item unanswered" @click="viewQuestion('选择题', 8)">
						<text class="question-number">第8题</text>
						<text class="question-score">-<text class="score-divider">/</text>10</text>
					</view>
					<view class="question-item unanswered" @click="viewQuestion('选择题', 9)">
						<text class="question-number">第9题</text>
						<text class="question-score">-<text class="score-divider">/</text>10</text>
					</view>
					<view class="question-item partial" @click="viewQuestion('选择题', 10)">
						<text class="question-number">第10题</text>
						<text class="question-score">5<text class="score-divider">/</text>10</text>
					</view>
				</view>
			</view>

			<!-- 多选题部分 -->
			<view class="question-section">
				<view class="question-type-header">
					<text class="question-type-title">多选题（共5题）</text>
				</view>
				<view class="question-grid">
					<view class="question-item correct" @click="viewQuestion('多选题', 11)">
						<text class="question-number">第11题</text>
						<text class="question-score">8<text class="score-divider">/</text>8</text>
					</view>
					<view class="question-item correct" @click="viewQuestion('多选题', 12)">
						<text class="question-number">第12题</text>
						<text class="question-score">10<text class="score-divider">/</text>10</text>
					</view>
					<view class="question-item partial" @click="viewQuestion('多选题', 13)">
						<text class="question-number">第13题</text>
						<text class="question-score">5<text class="score-divider">/</text>5</text>
					</view>
					<view class="question-item correct" @click="viewQuestion('多选题', 14)">
						<text class="question-number">第14题</text>
						<text class="question-score">10<text class="score-divider">/</text>10</text>
					</view>
					<view class="question-item wrong" @click="viewQuestion('多选题', 15)">
						<text class="question-number">第15题</text>
						<text class="question-score">0<text class="score-divider">/</text>5</text>
					</view>
				</view>
			</view>

			<!-- 填空题部分 -->
			<view class="question-section">
				<view class="question-type-header">
					<text class="question-type-title">填空题（共3题）</text>
				</view>
				<view class="question-grid">
					<view class="question-item correct" @click="viewQuestion('填空题', 16)">
						<text class="question-number">第16题</text>
						<text class="question-score">8<text class="score-divider">/</text>8</text>
					</view>
					<view class="question-item partial" @click="viewQuestion('填空题', 17)">
						<text class="question-number">第17题</text>
						<text class="question-score">5<text class="score-divider">/</text>10</text>
					</view>
					<view class="question-item wrong" @click="viewQuestion('填空题', 18)">
						<text class="question-number">第18题</text>
						<text class="question-score">0<text class="score-divider">/</text>12</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 固定底部按钮区域 -->
		<view class="fixed-bottom-actions">
			<view class="bottom-safe-area">
				<view class="bottom-buttons">
					<view class="error-collection-btn" @click="viewErrorCollection">
						<view class="error-icon">📋</view>
						<text class="error-text">错题集</text>
					</view>
					<view class="view-original-btn" @click="viewOriginalSheet">
						<text class="view-text">查看原题卡</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			studentName: '王凯',
			examTitle: '2024-2025年上学期九年级3月第三次模考',
			examDate: '2025/03/03',
			subject: '',
			totalScore: 120,
			maxScore: 150,
			objectiveScore: 67,
			subjectiveScore: 53
		}
	},
	onLoad(options) {
		// 接收传递的参数
		if (options.subject) {
			this.subject = decodeURIComponent(options.subject);
		}
		if (options.student) {
			this.studentName = decodeURIComponent(options.student);
		}
		console.log('答题卡页面参数:', options);
	},
	methods: {
		// 查看具体题目
		viewQuestion(type, number) {
			console.log(`查看题目: ${type} 第${number}题`);
			// 这里可以跳转到题目详情页面
			uni.showToast({
				title: `查看${type}第${number}题`,
				icon: 'none'
			});
		},
		// 查看错题集
		viewErrorCollection() {
			console.log('查看错题集');
			uni.showToast({
				title: '查看错题集',
				icon: 'none'
			});
		},
		// 查看原题卡
		viewOriginalSheet() {
			console.log('查看原题卡');
			uni.showToast({
				title: '查看原题卡',
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@text-lighter: #999;
@white: #fff;
@border-color: #F0F0F0;

.container {
	min-height: 100vh;
	background: linear-gradient(135deg, @primary-color 0%, @secondary-color 100%);
	display: flex;
	flex-direction: column;
}

// 主要内容区域
.main-content {
	flex: 1;
	padding: 20rpx 20rpx 0;
	padding-bottom: 140rpx; // 为底部固定按钮预留空间
}

// 学生信息卡片
.student-info-card {
	background: @white;
	border-radius: 20rpx;
	padding: 24rpx;
	margin-bottom: 16rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: hidden;

	// 添加微妙的渐变边框
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4rpx;
		background: linear-gradient(90deg, @primary-color 0%, @secondary-color 100%);
	}

	.student-tag {
		position: absolute;
		top: 0;
		left: 24rpx;
		background: linear-gradient(135deg, @primary-color 0%, #00BCD4 100%);
		color: @white;
		padding: 10rpx 20rpx;
		border-radius: 0 0 16rpx 16rpx;
		font-size: 26rpx;
		font-weight: bold;
		box-shadow: 0 2rpx 8rpx rgba(77, 208, 225, 0.3);
	}

	.exam-info {
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		gap: 12rpx;

		.exam-title {
			font-size: 34rpx;
			font-weight: bold;
			color: @text-color;
			line-height: 1.4;
			letter-spacing: 0.5rpx;
		}

		.exam-date {
			font-size: 26rpx;
			color: @text-light;
			opacity: 0.8;
		}
	}
}

// 成绩统计
.score-summary {
	background: @white;
	border-radius: 20rpx;
	padding: 28rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	gap: 40rpx;
	position: relative;
	overflow: hidden;

	// 背景装饰
	&::after {
		content: '';
		position: absolute;
		top: -50%;
		right: -20rpx;
		width: 200rpx;
		height: 200rpx;
		background: linear-gradient(135deg, rgba(77, 208, 225, 0.1), rgba(129, 199, 132, 0.1));
		border-radius: 50%;
		z-index: 1;
	}

	.main-score {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		z-index: 2;
		position: relative;

		.score-label {
			font-size: 26rpx;
			color: @text-light;
			margin-bottom: 10rpx;
			font-weight: 500;
		}

		.score-value {
			font-size: 88rpx;
			font-weight: bold;
			color: @text-color;
			line-height: 0.9;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		}

		.score-unit {
			font-size: 26rpx;
			color: @text-light;
			margin-top: 6rpx;
			font-weight: 500;
		}
	}

	.sub-scores {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
		z-index: 2;
		position: relative;

		.sub-score-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8rpx 0;

			.sub-label {
				font-size: 26rpx;
				color: @text-light;
				font-weight: 500;
			}

			.sub-value {
				font-size: 30rpx;
				font-weight: bold;
				color: @text-color;
			}
		}
	}
}

// 答题卡标题和状态
.answer-sheet-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
	padding: 0 4rpx;

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: @white;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		letter-spacing: 1rpx;
	}

	.status-legend {
		display: flex;
		gap: 24rpx;

		.legend-item {
			display: flex;
			align-items: center;
			gap: 8rpx;
			background: rgba(255, 255, 255, 0.15);
			padding: 8rpx 12rpx;
			border-radius: 20rpx;
			backdrop-filter: blur(10rpx);

			.legend-color {
				width: 16rpx;
				height: 16rpx;
				border-radius: 4rpx;
				box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);

				&.correct { background: #4CAF50; }
				&.wrong { background: #F44336; }
				&.partial { background: #FF9800; }
				&.unanswered { background: #E0E0E0; }
			}

			.legend-text {
				font-size: 22rpx;
				color: @white;
				font-weight: 500;
				text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
			}
		}
	}
}

// 提示文字
.tip-text {
	margin-bottom: 24rpx;
	padding: 0 4rpx;

	.tip-content {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9);
		text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
		font-weight: 500;
	}
}

// 题目部分
.question-section {
	margin-bottom: 30rpx;

	.question-type-header {
		margin-bottom: 16rpx;

		.question-type-title {
			font-size: 28rpx;
			font-weight: bold;
			color: @white;
		}
	}

	.question-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 12rpx;

		.question-item {
			background: @white;
			border-radius: 16rpx;
			padding: 20rpx 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10rpx;
			box-shadow: 0 3rpx 12rpx rgba(0, 0, 0, 0.08);
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			border-left: 6rpx solid transparent;
			position: relative;
			overflow: hidden;

			// 微妙的背景光效
			&::before {
				content: '';
				position: absolute;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
				transform: scale(0);
				transition: transform 0.3s;
			}

			&:active {
				transform: scale(0.95);
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
				
				&::before {
					transform: scale(1);
				}
			}

			&.correct {
				border-left-color: #4CAF50;
				background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(255, 255, 255, 0.95));
				
				.question-score {
					color: #4CAF50;
					text-shadow: 0 1rpx 2rpx rgba(76, 175, 80, 0.2);
				}
			}

			&.wrong {
				border-left-color: #F44336;
				background: linear-gradient(135deg, rgba(244, 67, 54, 0.05), rgba(255, 255, 255, 0.95));
				
				.question-score {
					color: #F44336;
					text-shadow: 0 1rpx 2rpx rgba(244, 67, 54, 0.2);
				}
			}

			&.partial {
				border-left-color: #FF9800;
				background: linear-gradient(135deg, rgba(255, 152, 0, 0.05), rgba(255, 255, 255, 0.95));
				
				.question-score {
					color: #FF9800;
					text-shadow: 0 1rpx 2rpx rgba(255, 152, 0, 0.2);
				}
			}

			&.unanswered {
				border-left-color: #E0E0E0;
				background: linear-gradient(135deg, rgba(224, 224, 224, 0.05), rgba(255, 255, 255, 0.95));
				
				.question-score {
					color: #999;
				}
			}

			.question-number {
				font-size: 22rpx;
				color: @text-light;
				text-align: center;
				font-weight: 500;
				letter-spacing: 0.5rpx;
			}

			.question-score {
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				letter-spacing: 0.5rpx;

				.score-divider {
					color: @text-lighter;
					font-weight: normal;
					opacity: 0.7;
				}
			}
		}
	}
}

// 固定底部按钮区域
.fixed-bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;

	.bottom-safe-area {
		background: linear-gradient(135deg, @primary-color 0%, @secondary-color 100%);
		padding: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

		.bottom-buttons {
			display: flex;
			gap: 20rpx;

			.error-collection-btn {
				background: @white;
				border-radius: 50rpx;
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				gap: 12rpx;
				box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
				transition: all 0.2s;
				flex-shrink: 0;

				&:active {
					transform: scale(0.95);
				}

				.error-icon {
					font-size: 32rpx;
				}

				.error-text {
					font-size: 26rpx;
					color: @text-color;
					font-weight: 600;
				}
			}

			.view-original-btn {
				flex: 1;
				background: @primary-color;
				border-radius: 50rpx;
				padding: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 6rpx 20rpx rgba(77, 208, 225, 0.4);
				transition: all 0.2s;
				position: relative;
				overflow: hidden;

				// 添加光泽效果
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
					transition: left 0.5s;
				}

				&:active {
					transform: scale(0.95);
					
					&::before {
						left: 100%;
					}
				}

				.view-text {
					font-size: 30rpx;
					color: @white;
					font-weight: bold;
					letter-spacing: 1rpx;
				}
			}
		}
	}
}
</style>
